<template>
	<view>
		<!-- food-list列表中的每一个元素用food-item来展示在页面中 -->
		<view class = "food-list">
			<!-- Vue 的列表渲染指令，遍历 foodList 数组，把数组里的每个元素（食品数据）依次赋值给 item，index 是当前元素的索引。 -->
		  <view class= "food-item" v-for="(item,index) in foodList" :key="index">
			  <!-- 显示图片，这里图片添加了 alt 属性，当图片无法加载时会显示食品名称。 -->
			  <img class = "food-image" :src="item.img" alt="">
			  <!-- 这里food-info显示的是文本内容 -->
			  <view class="food-info">
				  <!-- 使用插值语法渲染文本 -->
				<view class = "food-name">{{item.name}}</view>
				<view class = "food-description">{{item.desc}}</view>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
	// 导出当前组件，让它能在其他地方被引入和使用。
	export default {
		 data() {//Vue 组件的核心选项，返回一个对象，里面是组件要用到的响应式数据。这里的 foodList 数组，存着要展示的食品数据，每个对象包含食品的 id（唯一标识）、img（图片路径）、name（名称）、desc（描述）。
			return {
				// footList用于返回多个对象
				foodList:[
					{   //注意：将数据对象中的 id=1 改为 id: 1，JavaScript 对象属性赋值需要使用冒号
						// id=1,
						id:1,
						img:'/static/images/hongshaorou.jpg',
						name:'红烧肉',
						desc:'好吃'
					},
					{
						id:2,
						img:'/static/images/gongbaojiding.jpeg',
						name:'宫保鸡丁',
						desc:'好吃'
					},
				]
				
			};
		},
		// 2025-10-31 生命周期函数的演示代码示例(生命周期版)
		// onLoad(option){
		// 	console.log("当前执行了onload")
		// 	console.log(option);
		// },
		// onShow(){
		// 	console.log("当前执行了onshow")
		// },
		// onReady(){
		// 	console.log("当前执行了onready")
		// },
		// onHide(){
		// 	console.log("当前执行了onhide")
		// },
		// onUnload(){
		// 	console.log("当前执行了unload")
		// },
		onLoad(option){
			console.log(option);
		}
	}
</script>

<style lang="scss">
	.food-list{
		// 内边距
		padding: 20rpx;
	}
	.food-item{
		// 弹性盒布局
		display: flex;
		// 设置文本显示在中间
		align-items: center;
		// 外边距
		margin-bottom: 10rpx;
		// 显示边框1px
		border: 1px solid #ddd;
		// 内边距
		padding: 10rpx;
		// 设置圆角
		border-radius: 5px;
	}
	.food-image{
		width: 80px;
		height: 80px;
		// 注意写法：object-fit: conver;自适应让图片在保持比例的同时填满容器
		object-fit: cover;
		// 外边距
		margin-right: 10px;
	}
	.food-info{
		// 让食品信息部分在剩余空间中自动填充，确保和图片排列协调。
		flex:1;
	}
	.food-name{
		font-size:18px;
		font-weight: bold;
		
	}
	.food-description{
		color:"#666";
	}

</style>
